<script setup>
import { resetPwdByForgetPassword } from '@/api/system/app'
import { ElMessageBox } from 'element-plus'
import { Lock } from '@element-plus/icons-vue'
import { sm4Encrypt } from '@/utils/sm4'

const props = defineProps({
  phoneNum: {
    type: String,
    default: ''
  }
})
const confirmFormRef = ref()
const confirmFormModel = reactive({
  newPassword: '',
  confirmPassword: '',
  loginButtonDisabled: false,
  loginButtonLoading: false,
  loginButtonName: '保存'
})
const confirmFormRules = reactive({
  newPassword: [{ required: true, message: '请输入新密码！', trigger: 'blur' }],
  confirmPassword: [{ required: true, message: '请输入确认新密码！', trigger: 'blur' }]
})
const submitForm = () => {
  confirmFormModel.loginButtonDisabled = true
  confirmFormModel.loginButtonLoading = true
  confirmFormRef.value.validate((valid) => {
    if (valid) {
      const param = {
        userName: props.phoneNum,
        newPassWord: sm4Encrypt(confirmFormModel.newPassword),
        quesPassWord: sm4Encrypt(confirmFormModel.confirmPassword)
      }
      resetPwdByForgetPassword(param).then(res => {
        ElMessageBox.confirm('修改密码成功，返回重新登录', '提示', {
          confirmButtonText: '登录',
          cancelButtonText: '取消',
          type: 'success',
        }).then(() => {
          // router.replace({ path: '/login' });
          location.reload();
        });
      }).catch(err => {
        confirmFormModel.loginButtonDisabled = false
        confirmFormModel.loginButtonLoading = false
      })
    } else {
      confirmFormModel.loginButtonDisabled = false
      confirmFormModel.loginButtonLoading = false
    }
  })
}
</script>

<template>
  <el-form ref="confirmFormRef" :model="confirmFormModel" :rules="confirmFormRules">
    <el-form-item prop="newPassword">
      <el-input v-model="confirmFormModel.newPassword" :prefix-icon="Lock" placeholder="请输入新密码" clearable />
    </el-form-item>
    <el-form-item prop="newPassword">
      <el-input
        v-model="confirmFormModel.confirmPassword"
        :prefix-icon="Lock"
        placeholder="请输入确认新密码"
        clearable
      />
    </el-form-item>
    <div class="flex justify-center mt-6">
      <el-button
        type="primary"
        @click="submitForm"
        :disabled="confirmFormModel.loginButtonDisabled"
        :loading="confirmFormModel.loginButtonLoading"
      >
        {{ confirmFormModel.loginButtonName }}
      </el-button>
    </div>
  </el-form>
</template>

<style lang="scss" scoped></style>
